<template>
  <div class="form-css">
    <a-form class="a-form-css">
      <a-form-item>
        <a-tabs @tab-click="changeType">
          <a-tab-pane key="1">
            <template #title> <icon-calendar /> 选择题 </template>
          </a-tab-pane>
          <a-tab-pane key="2">
            <template #title> <icon-clock-circle /> 填空题 </template>
          </a-tab-pane>
          <a-tab-pane key="3">
            <template #title> <icon-user /> 简答题 </template>
          </a-tab-pane>
        </a-tabs>
      </a-form-item>
      <a-form-item style="width: 90px">
        <a-button class="sub-css" type="primary" @click="onNextClick">
          {{ $t('stepForm.button.next') }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, defineEmits} from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { BaseInfoModel } from '@/api/form';
  // import  {Emit} from 'vue-property-decorator';

  // export default {
  //   name: "choose-question-type"
  // };

  // const props1 = defineProps({
  //   type:String,
  // });

  // const emits = defineEmits(['changeStep', 'func']);

  const formRef = ref<FormInstance>();
  const formData = ref<BaseInfoModel>({
    activityName: '',
    channelType: '',
    promotionTime: [],
    promoteLink: 'https://arco.design',
  });

  // 确定是哪个类型   1 选择题  2 填空题  3 简答题
  const questionType = ref(1);

  // @Emit("changeType")

  // 改变问题的类型，是对标签的操作
  // 要进行 子组件向父组件 传递参数
  const changeType = (key: string) => {
    if (key === '1') {
      questionType.value = 1;
    } else if (key === '2') {
      questionType.value = 2;
    } else {
      questionType.value = 3;
    }
  };

  // const onNextClick = async () => {
  //   const res = await formRef.value?.validate();
  //   if (!res) {
  //     emits('changeStep', 'forward', { ...formData.value });
  //   }
  // };

  const emit = defineEmits(["changquestiontype"])


  // const onNextClick = () => {
  //     emit("changquestiontype",2,questionType.value)
  // }

  const onNextClick = () => {
    emit("changquestiontype",2,questionType.value)
  }

</script>

<style scoped>
  .form-css {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;
  }

  .a-form-css {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sub-css {
    align-items: center;

    /* display: flex; */
    justify-content: center;
  }
</style>
